import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {Carousel} from 'antd';
import FirstStore from '../../../../store/firstStore'

import threeFire from '../../../../assets/imgs/test/threeFire.png'
import twoFire from '../../../../assets/imgs/test/twoFire.png'
import fire from '../../../../assets/imgs/test/fire.png'
import ModalText from "../../../../components/ModalText";


interface IProps {
    borderBottom: string
    borderTop: string
}

interface IStates {
}

@observer
class Home extends React.Component<IProps, IStates> {

    constructor(props) {
        super(props);
    }

    // 时间戳转化
    public handleChange = (value: any) => {
        const now = new Date(parseInt(value,10)*1000),
            y = now.getFullYear(),
            m = now.getMonth() + 1,
            d = now.getDate();
        return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
    }


    public render() {
        const {borderBottom, borderTop} = this.props
        const {errorTen} = FirstStore
        return (
            <div className={styles.swiper} style={{borderBottom: borderBottom}}>
                <div className={styles.title} style={{borderTop: borderTop}}>
                    <span className={styles.spanWidth}><ModalText text='设备号' long={10}/></span>
                    <span className={styles.spanWidth}><ModalText text='错误编码' long={10}/></span>
                    <span className={styles.spanWidth}><ModalText text='时间' long={10}/></span>
                    <span className={styles.fixSpan}><ModalText text='错误描述' long={20}/></span>
                </div>
                <div className={styles.swiperC}>
                    {
                        errorTen.length > 0 &&
                        <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={8} autoplaySpeed={2000}>
                            {
                                errorTen.map((item, index) => {
                                    return (
                                        <div className={index % 2 === 0 ? styles.list1 : styles.list}
                                             key={`item_${index}_Error`}>
                                            {/*<img src={fire} className={styles.error}/>*/}
                                            <div className={styles.listC}>
                                                <span className={styles.spanWidth}><ModalText text={item.MachineId}
                                                                                              long={10}/></span>
                                                <span className={styles.spanWidth}><ModalText text={item.FaultCode}
                                                                                              long={10}/></span>
                                                <span className={styles.spanWidth}><ModalText text={this.handleChange(item.ServerTime).slice(0,10)}
                                                                                              long={10}/></span>
                                                <span className={styles.fixSpan}><ModalText text={item.error}
                                                                                              long={20}/></span>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
